import React, { useState } from 'react';
import './TopFilterBar.css';

const colors = [
  { value: 'multi', color: 'linear-gradient(135deg, #6b8cff 0%, #ff6a00 100%)' },
  { value: 'red', color: '#ff5722' },
  { value: 'orange', color: '#ff9800' },
];

const options = [
  { label: '风格', values: ['全部', '简约', '可爱', '商务'] },
  { label: '版式', values: ['全部', '横版', '竖版'] },
  { label: '价格', values: ['全部', '免费', '付费'] },
  { label: '类型', values: ['全部', '图片', '视频'] },
];

export default function TopFilterBar() {
  const [color, setColor] = useState('multi');
  const [showMoreColor, setShowMoreColor] = useState(false);
  const [selects, setSelects] = useState({ 风格: '全部', 版式: '全部', 价格: '全部', 类型: '全部' });
  const [onlySet, setOnlySet] = useState(false);

  return (
    <div className="top-filter-bar">
      <div className="color-filter">
        <span className="filter-label">颜色：</span>
        {colors.slice(0, 3).map(c => (
          <span
            key={c.value}
            className={`color-dot${color === c.value ? ' active' : ''}`}
            style={{ background: c.color }}
            onClick={() => setColor(c.value)}
          />
        ))}
        <span className="color-more" onClick={() => setShowMoreColor(!showMoreColor)}>更多 <span style={{fontSize:12}}>▼</span></span>
      </div>
      {options.map(opt => (
        <div className="select-filter" key={opt.label}>
          <span className="filter-label">{opt.label}：</span>
          <select
            value={selects[opt.label as keyof typeof selects]}
            onChange={e => setSelects(s => ({ ...s, [opt.label]: e.target.value }))}
          >
            {opt.values.map(v => <option key={v} value={v}>{v}</option>)}
          </select>
        </div>
      ))}
      <div className="switch-filter">
        <span className="filter-label">只看套装</span>
        <label className="switch">
          <input type="checkbox" checked={onlySet} onChange={e => setOnlySet(e.target.checked)} />
          <span className="slider"></span>
        </label>
      </div>
    </div>
  );
} 